<template>
  <div style="overflow-y: scroll; flex-grow: 1; position: fixed; left: 0; bottom: 0; height: calc(100% - 120px)">
    <el-row>
      <el-col v-for="(item, index) in list" :key="index" :span="6">
        <div style="">
          <news-card :index="index" :form-data="item" :video="true" @click="showVideo"/>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :modal="false"
      :destroy-on-close="true"
      :center="true"
      :custom-class="'videoDialog'"
      title=""
      @open="dialogOpen"
      @close="dialogClose"
    >
      <div style="width: 100%; height: 100%;">
        <vue-core-video-player :src="url"></vue-core-video-player>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import hotApi from '../../api/hotApi'
import NewsCard from './NewsCard'
import videoPlayer from './videoPlayer'
import videoPlayerPlus from './videoPlayerPlus'

export default {
  name: 'Bili',
  components: {
    NewsCard,
    videoPlayer,
    videoPlayerPlus
  },
  data() {
    return {
      videoVisable: false,
      url: '',
      dialogVisible: false,
      list: [],
      total: 0
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      hotApi.getHotList('bili').then(res => {
        this.list = res.data.list
        this.total = res.data.total
      }).catch(res => {
      })
    },
    showVideo(url) {
      this.url = url
      this.dialogVisible = true
    },
    dialogOpen() {
      console.log('dialog open ------------------------------------------', this.url)
      this.videoVisable = true
      this.$refs.videoPlayer.play(window.location.origin + this.url)
    },
    dialogClose() {
      this.$refs.videoPlayer.close()
      this.videoVisable = false
    }
  }
}
</script>

<style scoped>

/deep/ .play-pause-layer .btn-control {
  display: none;
}

/deep/ .btn-control .tips {
  padding: 0px;
}

/deep/ .el-dialog {
  display: flex;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  /*height:600px;*/
}
/deep/ .el-dialog .el-dialog__body {
  flex:1;
  overflow: auto;
}

/deep/ .el-dialog--center .el-dialog__body {
  padding: 50px 0 0;
  /*background: black;*/
  width: 1200px;
  height: 650px;
}

/deep/ .el-dialog__body {
  width: 1200px;
  height: 650px;
  /*background: black;*/
  padding: 0 0 0;
}

/deep/ .el-dialog__header {
  /*background: black;*/
  padding: 0 0 0;
}

.videoDialog {
  align-items: center;
  text-align: center;
  /*background: black;*/
  width: 1200px;
  height: 650px;
}

span {
  margin: 10px 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size: 13px;
  color: #999;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.image-wrapper{
  width: 100%;
}
.image-wrapper img{
  width: 100%;
}

</style>
